﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">

            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/SystemSetup/Index"><i class="fa fa-dashboard"></i> 系统配置</a></li>

            </ol>
        </div>
        <div class="box-body">

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3">
                    <input class="form-control" v-model="table.args.name" placeholder="名称" debounce="500" />
                </div>

                <div class="col-xs-3">
                    <input class="form-control" v-model="table.args.value" placeholder="配置" debounce="500" />
                </div>
            </div>

            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData()">查 询</button>
                        <a class="btn btn-warning btn-flat" href="/SystemSetup/Create">新 增</a>
                        <button type="button" class="btn btn-default btn-flat" v-on:click="remove()">删 除</button>
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col v-bind:span="24">
                    <el-table class="form-group" ref="$table" v-bind:data="table.rows" border style="width: 100%" v-bind:height="table.height">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="Name" label="名称"></el-table-column>
                        <el-table-column prop="Value" label="配置"></el-table-column>
                        <el-table-column prop="Description" label="描述"></el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button-group>

                                    <el-button v-on:click="editRow(scope.row)" size="small" type="success">编辑</el-button>
                                    <el-button v-on:click="deleteRow(scope.row)" size="small" type="danger">删除</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper"
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>

        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>
</div>

@section scripts{

    <script>

        // bootstrap the demo
        var vue = new Vue({
            components: {
            },
            el: '#app',
            data: {
                table: {
                    height:450,
                    rows: [],
                    args: { name: '',value:'' },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize }
                },

            },
            methods: {
                remove: function () {

                    var selectRows = this.$refs.$table.selection;
                    var ids = [];
                    selectRows.forEach(function (item, index) {
                        ids.push(item.Id);
                    });
                    var data=ids.join(',');
                    this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        $.post("/SystemSetup/Delete", { ids: data }, function (result) {
                            if (result.success) {
                                vue.$alert('删除成功', '成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        vue.loadData();
                            }
                        });


                }
            else {
                                this.$message({
            type: 'error',
            message: result.error
        });
        }
        }, "json");
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });

        },
        onPageChange: function (page) {
            this.table.page.pageIndex = page;
            this.loadData();
        },
        onPageSizeChange: function (pageSize) {
            this.table.page.pageSize = pageSize;
            this.loadData();
        },
        //获取选中的列
        selsChange: function (sels) {
            this.sels = sels;
        },
        loadData: function () {
            var _self = this;

            var url = "/SystemSetup/LoadData";
            var data = Object.assign({}, _self.table.page, _self.table.args);
            $.get(url, data, function (result) {
                if (result.success) {
                    _self.table.rows = result.data;
                    _self.table.page.total = result.total;
                }
                else {
                    _self.$message({
                        message: result.error,
                        type: 'error'
                    });
                }
            }, "Json");
        },
        detailRow: function (row) {
            this.$message({
                message: '查看详细' + row.Id,
                type: 'success'
            });
        },
        editRow: function (row) {
            window.location.href = "/SystemSetup/Edit/"+row.Id;

        },
        deleteRow: function (row) {

            var id='';
            id=row.Id;
            this.$confirm('此操作将删除该菜单【'+row.Name+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                $.post("/SystemSetup/Delete",{ids:id}, function (result) {
                    if (result.success) {

                        vue.$alert('删除成功', '成功', {
                            confirmButtonText: '确定',
                            callback: action => {
                                vue.loadData();
                    }
                });
        }
        else {

                                vue.$message({
                                    type: 'error',
                                    message: result.error
                                });
        }
        }, "json");

        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
        },




        }
        ,

        created: function () {
            setListPage(this.table, 253 );
        },
        })

    </script>
}


